<template>
  <div class="facilities-editor">
    <!-- 设施列表表格 -->
    <el-table :data="facilitiesList" style="width: 100%; margin-bottom: 15px;" size="small" border>
      <el-table-column label="图标" width="80" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon"></i>
          <span v-else>无图标</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
      <el-table-column label="描述" prop="description" align="center"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加设施按钮 -->
    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加设施</el-button>

    <!-- 添加/编辑设施对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" append-to-body>
      <el-form :model="currentFacility" :rules="rules" ref="facilityForm" label-width="80px">
        <el-form-item label="图标" prop="icon">
          <el-select v-model="currentFacility.icon" filterable placeholder="请选择图标" style="width: 100%">
            <el-option
              v-for="icon in iconOptions"
              :key="icon.value"
              :label="icon.label"
              :value="icon.value">
              <span><i :class="icon.value" style="margin-right: 8px;"></i>{{ icon.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="currentFacility.name" placeholder="请输入设施名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="currentFacility.description" type="textarea" placeholder="请输入设施描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FacilitiesEditor',
  props: {
    value: {
      type: [String, Array],
      default: ''
    }
  },
  data() {
    return {
      facilitiesList: [],
      dialogVisible: false,
      dialogTitle: '添加设施',
      editIndex: -1,
      currentFacility: {
        icon: '',
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入设施名称', trigger: 'blur' }
        ]
      },
      // 常用的Element UI图标
      iconOptions: [
        { value: 'el-icon-s-home', label: '家' },
        { value: 'el-icon-s-shop', label: '商店' },
        { value: 'el-icon-s-marketing', label: '营销' },
        { value: 'el-icon-s-goods', label: '商品' },
        { value: 'el-icon-s-help', label: '帮助' },
        { value: 'el-icon-s-tools', label: '工具' },
        { value: 'el-icon-s-custom', label: '用户' },
        { value: 'el-icon-s-release', label: '发布' },
        { value: 'el-icon-s-ticket', label: '票据' },
        { value: 'el-icon-s-management', label: '管理' },
        { value: 'el-icon-s-open', label: '开放' },
        { value: 'el-icon-s-flag', label: '旗帜' },
        { value: 'el-icon-s-comment', label: '评论' },
        { value: 'el-icon-s-finance', label: '财务' },
        { value: 'el-icon-s-claim', label: '认领' },
        { value: 'el-icon-s-opportunity', label: '机会' },
        { value: 'el-icon-s-data', label: '数据' },
        { value: 'el-icon-s-check', label: '检查' },
        { value: 'el-icon-s-grid', label: '网格' },
        { value: 'el-icon-s-promotion', label: '促销' },
        { value: 'el-icon-s-fold', label: '折叠' },
        { value: 'el-icon-s-unfold', label: '展开' },
        { value: 'el-icon-s-platform', label: '平台' },
        { value: 'el-icon-s-order', label: '订单' },
        { value: 'el-icon-s-cooperation', label: '合作' },
        { value: 'el-icon-camera', label: '相机' },
        { value: 'el-icon-video-camera', label: '摄像机' },
        { value: 'el-icon-phone', label: '电话' },
        { value: 'el-icon-mobile', label: '手机' },
        { value: 'el-icon-bell', label: '铃铛' },
        { value: 'el-icon-microphone', label: '麦克风' },
        { value: 'el-icon-location', label: '位置' },
        { value: 'el-icon-office-building', label: '办公楼' },
        { value: 'el-icon-school', label: '学校' },
        { value: 'el-icon-guide', label: '指南' },
        { value: 'el-icon-printer', label: '打印机' },
        { value: 'el-icon-bicycle', label: '自行车' },
        { value: 'el-icon-truck', label: '卡车' },
        { value: 'el-icon-ship', label: '船' },
        { value: 'el-icon-basketball', label: '篮球' },
        { value: 'el-icon-football', label: '足球' },
        { value: 'el-icon-soccer', label: '足球' },
        { value: 'el-icon-baseball', label: '棒球' },
        { value: 'el-icon-wind-power', label: '风力' },
        { value: 'el-icon-light-rain', label: '小雨' },
        { value: 'el-icon-lightning', label: '闪电' },
        { value: 'el-icon-heavy-rain', label: '大雨' },
        { value: 'el-icon-sunrise', label: '日出' },
        { value: 'el-icon-sunrise-1', label: '日出1' },
        { value: 'el-icon-sunset', label: '日落' },
        { value: 'el-icon-sunny', label: '晴天' },
        { value: 'el-icon-cloudy', label: '多云' },
        { value: 'el-icon-partly-cloudy', label: '局部多云' },
        { value: 'el-icon-cloudy-and-sunny', label: '晴转多云' },
        { value: 'el-icon-moon', label: '月亮' },
        { value: 'el-icon-moon-night', label: '夜晚' },
        { value: 'el-icon-dish', label: '餐具' },
        { value: 'el-icon-dish-1', label: '餐具1' },
        { value: 'el-icon-food', label: '食物' },
        { value: 'el-icon-chicken', label: '鸡肉' },
        { value: 'el-icon-fork-spoon', label: '刀叉' },
        { value: 'el-icon-knife-fork', label: '刀叉' },
        { value: 'el-icon-burger', label: '汉堡' },
        { value: 'el-icon-tableware', label: '餐具' },
        { value: 'el-icon-sugar', label: '糖' },
        { value: 'el-icon-dessert', label: '甜点' },
        { value: 'el-icon-ice-cream', label: '冰淇淋' },
        { value: 'el-icon-hot-water', label: '热水' },
        { value: 'el-icon-water-cup', label: '水杯' },
        { value: 'el-icon-coffee-cup', label: '咖啡杯' },
        { value: 'el-icon-cold-drink', label: '冷饮' },
        { value: 'el-icon-goblet', label: '高脚杯' },
        { value: 'el-icon-goblet-full', label: '满杯' },
        { value: 'el-icon-goblet-square', label: '方杯' },
        { value: 'el-icon-goblet-square-full', label: '满方杯' },
        { value: 'el-icon-refrigerator', label: '冰箱' },
        { value: 'el-icon-grape', label: '葡萄' },
        { value: 'el-icon-watermelon', label: '西瓜' },
        { value: 'el-icon-cherry', label: '樱桃' },
        { value: 'el-icon-apple', label: '苹果' },
        { value: 'el-icon-pear', label: '梨' },
        { value: 'el-icon-orange', label: '橙子' },
        { value: 'el-icon-coffee', label: '咖啡' },
        { value: 'el-icon-ice-tea', label: '冰茶' },
        { value: 'el-icon-ice-drink', label: '冰饮' },
        { value: 'el-icon-milk-tea', label: '奶茶' },
        { value: 'el-icon-potato-strips', label: '薯条' },
        { value: 'el-icon-lollipop', label: '棒棒糖' },
        { value: 'el-icon-ice-cream-square', label: '冰淇淋' },
        { value: 'el-icon-ice-cream-round', label: '圆冰淇淋' }
      ]
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          try {
            if (typeof val === 'string') {
              this.facilitiesList = JSON.parse(val);
            } else if (Array.isArray(val)) {
              this.facilitiesList = val;
            }
          } catch (e) {
            console.error('解析设施数据失败', e);
            this.facilitiesList = [];
          }
        } else {
          this.facilitiesList = [];
        }
      },
      immediate: true
    }
  },
  methods: {
    // 添加设施
    handleAdd() {
      this.dialogTitle = '添加设施';
      this.editIndex = -1;
      this.currentFacility = {
        icon: '',
        name: '',
        description: ''
      };
      this.dialogVisible = true;
    },

    // 编辑设施
    handleEdit(index, row) {
      this.dialogTitle = '编辑设施';
      this.editIndex = index;
      this.currentFacility = JSON.parse(JSON.stringify(row)); // 深拷贝，避免直接修改
      this.dialogVisible = true;
    },

    // 删除设施
    handleDelete(index) {
      this.$confirm('确认删除该设施?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.facilitiesList.splice(index, 1);
        this.updateValue();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 提交表单
    submitForm() {
      this.$refs.facilityForm.validate((valid) => {
        if (valid) {
          if (this.editIndex === -1) {
            // 添加新设施
            this.facilitiesList.push({
              icon: this.currentFacility.icon,
              name: this.currentFacility.name,
              description: this.currentFacility.description
            });
          } else {
            // 更新现有设施
            this.facilitiesList[this.editIndex] = {
              icon: this.currentFacility.icon,
              name: this.currentFacility.name,
              description: this.currentFacility.description
            };
          }

          this.updateValue();
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: this.editIndex === -1 ? '添加成功!' : '更新成功!'
          });
        }
      });
    },

    // 更新v-model值
    updateValue() {
      this.$emit('input', JSON.stringify(this.facilitiesList));
    }
  }
};
</script>

<style scoped>
.facilities-editor {
  margin-bottom: 20px;
}
</style>
